<template>
    <section>
        <div class="header">
            <span class="left">
                <img src="../../assets/raiders/200.jpg">
                <span>MagicRabbit</span>
            </span>
            <span class="right">
                <i class="el-icon-plus"></i>
                <span>关注</span>
            </span>
        </div>
        <div class="lunbo">
            <!-- swiper -->
            <swiper :options="swiperOption">
                <swiper-slide v-for="(item,i) in list" :key='i'><div class="swipe_div"  :style="{'backgroundImage':'url('+item+')'}"></div></swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>

        </div>
        <div class="content">
            又是一年圣诞季，去年一个人在尼斯孤独的吃着冰淇淋逛着圣诞集市，今年搂着大家一起在日内瓦逛圣诞集市！比起漫天烟火，这点点星光更让人温暖吧
            <router-link to="">

                <span>在全世界过圣诞</span></router-link>
            <router-link to="">

                <span>2018旅行回忆</span>
            </router-link>
            <router-link to="">
                <i class="el-icon-location-outline"></i>
                <span>瑞士</span>
            </router-link>
            <router-link to="">
                <i class="el-icon-location-outline"></i>
                <span>日内瓦</span>
            </router-link>

        </div>
        <div class="together">
            <div>
                <img src="../../assets/raiders/1.svg">
                <span>在全世界过圣诞</span>
            </div>

        </div>
        <div class="time">
            <span>发布于12-23</span>
        </div>
        <div class="icon">
            <div>
                <img src="../../assets/raiders/3.svg">
                <span>89</span>
            </div>
            <div>
                <img src="../../assets/raiders/2.svg">
                <span>17</span>
            </div>
            <div>
                <img src="../../assets/raiders/4.svg">
                <span>556</span>
            </div>
        </div>
        <div class="comment">
            <div>
                <span>M_艾黛黛:</span>
                <span>棒棒😍</span>
            </div>
            <div>
                <span>Trip_Hopper:</span>
                <span>第一張相美極了, 請問是用什麼相機拍照的?</span>
            </div>
            <div>
                共17条评论
            </div>
        </div>
        <div class="dowloadapp">
            <div>打开APP查看全部精彩评论</div>
        </div>
        <div class="ad">
            <img src="../../assets/raiders/00.jpg">
        </div>
        <div class="index" @click="back">
            <img src="../../assets/raiders/返回首页.png">
        </div>
        <more></more>
    </section>
</template>
<script type="text/javascript">
    import more from '../page.vue'
    export default {
        name:'raiders',
        components:{
            "more":more
        },
        methods:{
            back(){
                this.$router.push({
                    path:'/',

                })
            }
        },
        data() {
          return {
            swiperOption: {
              pagination: {
                el: '.swiper-pagination',
                dynamicBullets: true
              }
            },
            list:[
                require('../../assets/raiders/1.jpg'),
                require('../../assets/raiders/2.jpg'),
                require('../../assets/raiders/3.jpg'),
                require('../../assets/raiders/4.jpg'),
                require('../../assets/raiders/5.jpg'),
                require('../../assets/raiders/6.jpg'),
                require('../../assets/raiders/7.jpg'),
                require('../../assets/raiders/8.jpg'),
            ],

          }
        }

    }
</script>

<style type="text/css" lang="less">
section{
    .header{
        position: fixed;
        top:0;
        left:0;
        right:0;
        z-index: 101;
        width: 100%;
        height: 3em;
        background-color:#08cec0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1em;
        .left{
            display: inline-block;
            margin-left: 1em;
            height: 3em;
            display: flex;
            align-items: center;
            img{
                width: 3em;
                height: 3em;
                border-radius: 1.5em;
                margin-right: 1em;
            }
            span{
                display: inline-block;
                height: 3em;
                line-height: 3em;
            }
        }
        .right{
            display: inline-block;
            border:1px solid gray;
            height: 2em;
            line-height: 2em;
            width: 6em;
            margin-right: 1em;
            text-align: center;
            border-radius:2em;
        }
    }
    .lunbo{
        margin-top: 3em;
        margin-bottom: 20px;
        display: inline-block;
        width: 100%;
        min-height: 281px;
        .swipe_div{
            height: 480px;
            overflow: hidden;
            background-image: url(../../assets/raiders/1.jpg);
            background-position: center center;
            background-size: contain !important;
            background-repeat: no-repeat;
            background-attachment: initial;
            background-origin: initial;
            background-clip: initial;
            background-color: initial;
        }
        .auido{

        }
    }
    .content{
        color:#333;
        line-height: 2em;
        box-sizing: border-box;
        padding: 0 1em;
        a{
            text-decoration: none;
            img{
                height: 12px;
                width: 12px;

            }
        }
    }
    .together{
        box-sizing: border-box;
        color:#ff5159;
        &>div{
            border:1px solid #ff5159;
            border-radius:2em;
            width: 10em;
            height: 2em;
            line-height: 2em;
            text-align:center;
            margin-left:1em;
            img{
                height: 12px;
                width: 12px;
            }
        }
    }
    .time{
        margin:2em 0 2em 1em;
        color:#9f9f9f;
    }
    .icon{
        text-align:right;
        display: flex;
        justify-content: flex-end;
        box-sizing: border-box;
        margin-right: 1em;
        div{
            margin:0 0.5em;
            display: flex;
            align-items: flex-start;
           img{
                width: 2em;
                height: 2em;
            }
            span{
                position: relative;
                top:0;
            }
        }

    }
    .comment{
        box-sizing: border-box;
        margin:1em;
        background-color:#f4f4f4;
        padding: 1em;
        border-radius:1em;
        div{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin:0.5em 0;
        }
        div:last-child{
            color:green;
        }
    }
    .dowloadapp{
        display: flex;
        justify-content: center;
        div{
            background: -webkit-gradient(linear,left top,right top,from(#0092dd),to(#00db95));
            background: linear-gradient(90deg,#0092dd,#00db95);
            width: 14em;
            height: 3em;
            line-height: 3em;
            text-align:center;
            cursor: pointer;
            border-radius: 100px;
            color: #fff;
            padding: 0 .13rem;
            font-family: PingFangSC-Semibold;
        }
    }
    .ad{
        width: 100%;
        margin:2em 0;
        img{
            width: 100%;
        }
    }
    .index{
        position: fixed;
        bottom: 1em;
        right:0;
        z-index:102;
    }
}


</style>
